<template>
  <div class="main">
    <el-container style="height:100%">
      <el-header>
        <div class="headerlist">
          <!-- 系统名 -->
          <div class="img"> 
            <p style="width: 350px;color:#fff;font-size:30px;text-align:center;font-weight:bold;">雷培德IOT设备控制系统</p>
            <!-- <img src="../../assets/image/title.png" /> -->
          </div>
          <div @click="logininfo" class="userinfo">
            <!-- <p>{{ $t("message.hello") }}</p> -->
            <p>个人中心</p>
          </div>
        </div>
        <div v-if="isshow" class="getout" @click="logout">退出登录</div>
      </el-header>

      <el-container>
        <el-aside width="220px">
          <el-row class="tac">
           
            <el-col style="height: calc(100vh - 40px); margin-top: -30px; padding-top: 60px;padding-left:19px;width:210px;padding-bottom: 24px;">
              <el-menu
                :router="true"
                :unique-opened="true"
                default-active="2"
                class="el-menu-vertical-demo"
                text-color="#fff"
                background-color="#17244E"
                active-text-color="#ffd04b"
              >
                
              <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-menu" style="color: white;"></i>
                    <span>智能照明</span>
                  </template>

                  <el-menu-item
                    index="/controller"
                  >设备控制</el-menu-item>
                  <el-menu-item
                    index="/timecontrol"
                  >分路控制</el-menu-item>
                  <el-menu-item
                    index="/profile"
                  >情景模式</el-menu-item>
                </el-submenu>

                <!-- <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-menu" style="color: white;"></i>
                    <span>云运维</span>
                  </template>

                  <el-menu-item
                    index="/statistic"
                  >能耗统计</el-menu-item>
                  <el-menu-item
                    index="/actionlog"
                  >操作日志</el-menu-item>
                  <el-menu-item
                    index="/operation"
                  >运行概况</el-menu-item>
                  <el-menu-item
                    index="/timestatistics"
                  >用时统计</el-menu-item>
                  
                </el-submenu> -->

              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <!-- 内容部分 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { userRouter} from "../../request/api";
import { successmsg, failmsg } from "../../tools/tools";

export default {
  data() {
    return {
      theme: localStorage.getItem("air-conditioner-theme") || "light",
      // theme: 'light',
      // 用户名
      username: "",
      // 用户是否登录
      islogin: true,
      // 登录退出菜单的隐藏
      isshow: false,
    };
  },
  created() {
  },
  mounted() {
    // 获取localStorage中的登录信息
    let userInfo = localStorage["userInfo"]
      ? JSON.parse(localStorage["userInfo"])
      : false;
    if (!userInfo) {
      this.islogin = false;
    } else {
      this.username = userInfo.username;
    }
  },
  methods: {
    switchTheme(theme) {
      this.$store.commit("setTheme", theme);
      // if (this.theme == 'light') {
      //   document
      //     .head.querySelector("#theme-link")
      //     .setAttribute("href", "./static/theme-dark.css");
      //     this.theme = 'dark'
      // } else {
      //   document.head
      //     .querySelector("#theme-link")
      //     .setAttribute("href", "./static/theme-light.css");
      //     this.theme ='light'
      // }
    
  },

    // 点击退出登录
    logout() {
      this.$router.replace('/login')
      // 清除sessionstorge中的数据
      localStorage.removeItem("userInfo");
      sessionStorage.removeItem("ButtonPermissions");
      sessionStorage.removeItem("usermenu");
    },
    // 点击头像显示退出登录
    logininfo() {
      this.isshow = !this.isshow;
    }
  }
};
</script>

<style scoped>
/* 消除导航栏白线 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
  border: none;
}
/* 头部ul */
.headerlist {
  background: image('../../assets/image/tops.png');
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
}
li i {
  color: #fff;
}
/* 退出登录 */
.getout {
  text-align: center;
  position: fixed;
  right: 240px;
  z-index: 13;
  font-size: 14px;
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: #f4f1f1;
}
.getout:hover {
  cursor: pointer;
}
/* 图标 */
/* 头像 */
.userinfo{
  /* border: #60b6f1; */
  width: 1000px;
  z-index: 12;
  color: white;
  display: flex;
  height: 40px;
  align-items:center;
  justify-content: center;
}
.userinfo p:nth-child(1){
  border: #60b6f1 1px solid;
  margin-left: 360px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  width: 80px;
  height: 30px;
}
.userinfo p:nth-child(1) img{
  width: 45px;
  border-radius: 50%;
}

/* 用户名 */

/* 移入变手 */
.menu:hover {
  cursor: pointer;
}
/* 退出登录 */
.menu {
  width: 120px;
  height: 40px;
  background: #314055;
  color: #000;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  position: absolute;
  right: 10px;
  top: 50px;
  z-index: 13;
  border-radius: 4px;
}
.main {
  background: var(--bg-color);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.el-menu{
    height: 100%;
    width: 100%;
 
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
   min-height: 400px;
}
.el-header {
  background: url('../../assets/image/tops.png') #0b1339;
  background-repeat: no-repeat; /* 图片不重复 */
  background-size: cover; /* 图片覆盖整个元素 */
  border-bottom: skyblue 2px solid;
  font-size: large;
  color: #333;
  line-height: 60px;
}
.el-aside i {
  color: #333;
}

.el-aside {
  /* height: calc(100% - 60px); */
  background-color: rgba(255, 255, 255, 0); /* 完全透明 */
  background: url('../../assets/image/leftFrame.png') #0b1339;
  background-repeat: no-repeat; /* 图片不重复 */
  background-size: cover; /* 图片覆盖整个元素 */
  color: white;
  line-height: 200px;
}

.el-main {
  background: url('../../assets/image/main-bottom.png') #0b1339;
  background-repeat: no-repeat; 
  background-size: cover; 
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
